<script lang="ts" setup name="projectProject">
import { getListByConditionsWithPage, urls } from '@/index';
import type {
  DialogModel,
  DrawerModel,
  ProjectProject,
  ProjectProjectQueryCondition
} from '@/index.d';
import { useRequest } from 'vue-request';
import DetailDialog from './DetailDialog.vue';
const title = '项目';
const queryCondition = reactive<ProjectProjectQueryCondition>({
  deleted: false,
  change: false,
  currentPage: 1,
  pageSize: 20
});

const resetQueryCondition = () => {
  queryCondition.currentPage = 1;
  queryCondition.pageSize = 20;
  queryCondition.deleted = false;
  delete queryCondition.projectProvince;
  delete queryCondition.projectType;
  delete queryCondition.projectName;
  delete queryCondition.productionName;
  delete queryCondition.ndePersonnelRequirement;
  delete queryCondition.purchaseCompanyId;
  delete queryCondition.designCompanyId;
  delete queryCondition.operatingCompanyId;
};

const {
  data: getProjectProjectListData,
  run: getProjectProjectListRun,
  loading: getProjectProjectListLoading
} = useRequest(() => getListByConditionsWithPage(urls.projectProject, queryCondition));

const handleResetQuery = () => {
  resetQueryCondition();
  getProjectProjectListRun();
};

const detailDialogModel = reactive<DialogModel<ProjectProject>>({
  visible: false,
  title,
  type: 'view',
  id: 0,
  change: false
});

watch(
  () => detailDialogModel.visible,
  (value: boolean) => {
    if (!value && detailDialogModel.change) {
      getProjectProjectListRun();
      detailDialogModel.change = false;
    }
  }
);
import ProductionDrawer from './ProductionDrawer.vue';
const productionDrawerModel = reactive<DrawerModel<ProjectProject>>({
  visible: false,
  type: 'view',
  id: 0,
  change: false,
  title: ''
});
const viewProjectProduction = (row: ProjectProject) => {
  productionDrawerModel.id = row.id as number;
  productionDrawerModel.title = row.longProjectName as string;
  productionDrawerModel.data = row;
  productionDrawerModel.visible = true;
};
</script>
<template>
  <ProductionDrawer
    v-model:drawer-model="productionDrawerModel"
    v-if="productionDrawerModel.visible"
  />
  <HqContainerTable
    :title="title"
    :base-url="urls.ndePersonCertification"
    :total="getProjectProjectListData?.total"
    :loading="getProjectProjectListLoading"
    :table-data="getProjectProjectListData?.records"
    v-model:pageSize="queryCondition.pageSize"
    v-model:current-page="queryCondition.currentPage"
    @handle-query="getProjectProjectListRun"
    @handle-reset-query="handleResetQuery"
    @handle-reload="getProjectProjectListRun"
    v-model:detail-dialog-model="detailDialogModel"
    operate-column
  >
    <template #search>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.projectProvince"
          filterable
          clearable
          placeholder="请选择项目地址"
          @change="getProjectProjectListRun"
        >
          <HqProvinceOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.projectType"
          filterable
          clearable
          placeholder="请选择项目堆型"
          @change="getProjectProjectListRun"
        >
          <HqDictionary type-text="项目堆型" />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-input v-model="queryCondition.projectName" placeholder="请输入项目名称" clearable />
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.productionName"
          filterable
          clearable
          placeholder="请选择产品名称"
          @change="getProjectProjectListRun"
        >
          <HqDictionary type-text="产品名称" />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.ndePersonnelRequirement"
          filterable
          clearable
          placeholder="请选择无损检测人员要求"
          @change="getProjectProjectListRun"
        >
          <HqNdeMethodDomainOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.purchaseCompanyId"
          clearable
          placeholder="请选择采购单位"
          @change="getProjectProjectListRun"
        >
          <HqRelationOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.designCompanyId"
          clearable
          placeholder="请选择设计单位"
          @change="getProjectProjectListRun"
        >
          <HqRelationOptions />
        </el-select>
      </hq-col>
      <hq-col kind="search">
        <el-select
          v-model="queryCondition.operatingCompanyId"
          clearable
          placeholder="请选择营运单位"
          @change="getProjectProjectListRun"
        >
          <HqRelationOptions />
        </el-select>
      </hq-col>
    </template>

    <template #tableColumns>
      <HqTableColumn label="产品清单" :min-width="100">
        <template #default="{ row }">
          <el-button link type="success" @click="viewProjectProduction(row)"> 产品清单 </el-button>
        </template>
      </HqTableColumn>
      <HqTableColumn label="无损人员要求" prop="ndePersonnelRequirement" :min-width="150" />
      <HqTableColumn label="项目全名称" prop="longProjectName" :min-width="400" />
      <HqTableColumn label="采购单位" prop="purchaseCompanyName" :min-width="300" />
      <HqTableColumn label="设计单位" prop="designCompanyName" :min-width="300" />
      <HqTableColumn label="营运单位" prop="operatingCompanyName" :min-width="300" />
    </template>
  </HqContainerTable>
  <DetailDialog v-model:dialog-model="detailDialogModel" v-if="detailDialogModel.visible" />
</template>
<style lang="scss" scoped></style>
